<template>
	<view>

		<u-navbar :is-back="true" title="" :background="background" :border-bottom="false" back-icon-color="#4b5ad9">
			<u-avatar :src="$url + dynamic.icon" size="mini" mode="square"></u-avatar>
			<text class="nav-text">{{dynamic.nickname}}</text>
			<view v-if="myId != dynamic.uuId" class="navbar-v">
				<view class="demo-bt">关注</view>
				<u-icon name="zhuanfa" color="#4b5ad9" size="45"></u-icon>
			</view>
			<view v-if="myId == dynamic.uuId" style="margin-left: 110rpx;">
				<u-icon name="more-dot-fill" color="#4b5ad9" size="45" @click="dynamicEdit"></u-icon>
			</view>
		</u-navbar>
		<view class="con_view">
			<view class="wrap">
				<u-swiper :list="imglist" :autoplay="false" height="430" :effect3d="true" img-mode="aspectFit"
					border-radius="0" @click="clickImg"></u-swiper>
			</view>
			<view class="con_text">
				<view>{{dynamic.title}}</view>
				<view style="color: #3f3f43;">{{dynamic.content}}</view>
			</view>
			<u-divider color="#4b5ad9" border-color="#4b5ad9" bg-color="#f2f3f7" half-width="100%">
				评论:总{{dynamic.comments}}条</u-divider>
			<view class="comments_view" v-for="(item, index) in flowList">
				<view class="comments">
					<u-avatar :src="$url + item.icon" size="mini" mode="circle"></u-avatar>
					<view style="margin-left: 10rpx;">
						<view style="display: flex;margin-bottom: 5rpx;">
							<view class="name_v">{{item.nickname}}</view>
							<text style="color: #9A9A9A;">{{item.createTime}}</text>
						</view>
						<text>{{item.content}}</text>
					</view>
				</view>
			</view>
			<view style="height:130rpx;"></view>
		</view>
		<view class="con_bottom">
			<u-icon name="star-fill" size="60" color="yellow" label="0"></u-icon>
			<!-- <u-icon name="star" size="60" color="#4b5ad9"></u-icon> -->
			<image src="../../../static/images/desire/bq1.png"></image>
			<view class="search">
				<u-search v-model="keyword" :show-action="true" action-text="发送" :animation="true" placeholder=""
					search-icon="" :clearabled="false" bg-color="#f2f3f7" :action-style="actionStyle" height="80"
					@custom="searchBank" @search="searchBank">
					>
				</u-search>
			</view>
			<!-- <u-icon name="heart" size="60" color="#4b5ad9"></u-icon> -->
			<u-icon :name="heart.name" size="60" :color="heart.color" :label="dynamic.likes" @click="clickLike">
			</u-icon>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="25">
			<view style="color: #9a9a9a;padding: 20rpx;background-color: #f2f3f7;">
				<view style="text-align: center;margin-bottom: 10rpx;font-size: 30rpx;">动态设置</view>
				<view class="popup-v">
					<view @click="delDynamic">
						<u-icon name="trash" color="#9a9a9a" size="50"></u-icon>
						<view class="text-v">删除</view>
					</view>
					<view @click="upDynamic">
						<u-icon name="edit-pen" color="#9a9a9a" size="50"></u-icon>
						<view class="text-v">修改</view>
					</view>
					<view>
						<u-icon name="zhuanfa" color="#9a9a9a" size="50"></u-icon>
						<view class="text-v">分享</view>
					</view>
					<view>
						<u-icon name="setting" color="#9a9a9a" size="50"></u-icon>
						<view class="text-v">权限设置</view>
					</view>
					<view>
						<u-icon name="attach" color="#9a9a9a" size="50"></u-icon>
						<view class="text-v">生成链接</view>
					</view>
					<view>
						<u-icon name="download" color="#9a9a9a" size="50"></u-icon>
						<view class="text-v">本地保存</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				myId: uni.getStorageSync('uuId'),
				background: {
					backgroundColor: '#ffffff',
					height: '150rpx',
				},
				actionStyle: {
					lineHeight: '40px',
					borderRadius: '60px',
					backgroundColor: '#4b5ad9',
					color: '#fff'
				},
				heart: {
					name: 'heart',
					color: '#4b5ad9',
				},
				keyword: '',
				form: {
					dynamicId: '',
					content: '',
				},
				commForm: {
					dynamicId: '',
					page: 0,
					limit: 8,
				},
				delDy: {
					id: '',
				},
				dynamic: {},
				imglist: [],
				commList: [],
				flowList: [],

			};
		},
		methods: {
			imgData() {
				for (let i = 0; i < this.dynamic.image.length; i++) {
					let item = this.$url + this.dynamic.image[i];
					this.imglist.push(item);
				}
			},
			clickImg(e) {
				let that = this;
				uni.previewImage({
					urls: that.imglist,
					// 长按图片处理
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							// 成功预览后下载图片
							uni.downloadFile({
								// 需要下载的图片路径
								url: that.imglist[e],
								success: (res) => {
									if (res.statusCode === 200) {
										// 调用图片保存到相册
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												//uniapp提供的消息提示框。
												uni.showToast({
													title: "保存成功",
													icon: "success"
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败，请稍后重试",
													icon: "none"
												});
											}
										});
									}
								}
							})
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			searchBank() {
				var comm = {
					content: '',
					createTime: this.$formatTime.dateTimeStr('m-d h:i'),
					icon: uni.getStorageSync('icon'),
					nickname: uni.getStorageSync('nickname'),
				};
				this.form.dynamicId = this.dynamic.id;
				this.form.content = this.keyword;
				comm.content = this.keyword;
				this.keyword = '',
					this.$sendRequest({
						url: "/comment/save",
						method: 'POST',
						data: this.form,
						success: (res) => {
							this.flowList.unshift(comm);
							console.log(res);
						}
					})
			},
			commentList() {
				this.commForm.page = this.commForm.page + 1;
				this.$sendRequest({
					url: "/comment/lists",
					method: 'GET',
					data: this.commForm,
					success: (res) => {
						this.commList = res.data.records;
						this.addRandomData();
					}
				})
			},
			addRandomData() {
				for (let i = 0; i < this.commList.length; i++) {
					let k1 = this.commList[i].createTime.indexOf('-') + 1;
					let k2 = this.commList[i].createTime.lastIndexOf(':');
					this.commList[i].createTime = this.commList[i].createTime.substring(k1, k2);
					let item = this.commList[i];
					this.flowList.push(item);
				}
			},
			reqLike() {
				this.$sendRequest({
					url: "/likes/select",
					method: 'GET',
					data: this.commForm,
					success: (res) => {
						if (res.data.data == 10) {
							this.heart.name = 'heart-fill';
							this.heart.color = 'red';
							this.dynamic.likes = this.dynamic.likes + 1;
						}
					}
				})
			},
			clickLike() {
				this.$sendRequest({
					url: "/likes/addLike",
					method: 'GET',
					data: this.commForm,
					success: (res) => {
						if (res.data == "LIKE" || res.data == "UNLIKE") {
							if (this.heart.name == "heart") {
								this.heart.name = 'heart-fill'
								this.heart.color = 'red'
								this.dynamic.likes = this.dynamic.likes + 1;
							} else {
								this.heart.name = 'heart'
								this.heart.color = '#4b5ad9'
								this.dynamic.likes = this.dynamic.likes - 1;
							}
						}
					}
				})
			},
			dynamicEdit() {
				this.show = true;
			},
			delDynamic() {
				this.delDy.id = this.dynamic.id;
				this.$sendRequest({
					url: "/dynamic/delete",
					method: 'PUT',
					data: this.delDy,
					success: (res) => {
						if (res.data.code == 200) {
							this.Back();
						}
					}
				})
			},
			upDynamic() {

			},
			Back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
		},
		// onLoad生命周期组件可能尚未创建完毕
		onShow() {
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				icon.hide();
			}, 100);
		},
		onLoad(options) {
			this.dynamic = JSON.parse(decodeURIComponent(options.dynamic));
			this.commForm.dynamicId = this.dynamic.id;
			this.commentList();
			this.reqLike();
			this.imgData();
		},
		onReachBottom() {
			// 数据加载
			setTimeout(() => {
				this.commentList();
			}, 1000)
		},
	}
</script>

<style>
	.nav-text {
		margin-left: 10rpx;
		width: 400rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
	}

	.con_view {
		margin-top: 20rpx;
		width: 100%;
	}

	.con_bottom {
		padding: 0 20rpx;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		background-color: #fffffd;
		border-radius: 0px 45px 0px 0px;
		box-shadow: -2px -3px 5px 5px rgba(235, 234, 246, 0.9);
	}

	.demo-bt {
		margin: auto 20rpx;
		padding-top: 7rpx;
		color: #ffffff;
		width: 80rpx;
		height: 48rpx;
		text-align: center;
		font-size: 22rpx;
		border-radius: 10px;
		background-color: #4b5ad9;
	}

	.con_text {
		margin: 20rpx auto;
		width: 90%;
	}

	.con_text view:nth-child(1) {
		margin-bottom: 10rpx;
		font-size: 30rpx;
		color: #4b5ad9;
	}

	.comments_view {
		margin: 0 auto;
		width: 90%;
	}

	.comments {
		margin-top: 20rpx;
		display: flex;
	}

	.name_v {
		width: 445rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
		/*溢出隐藏*/
	}

	.search {
		margin-top: 20rpx;
		margin-left: 5rpx;
		margin-right: 10rpx;
		width: 61%;
		height: 70rpx;
	}

	.con_bottom image {
		margin: 30rpx 10rpx 0 15rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.popup-v {
		display: flex;
		flex-direction: row;
	}

	.popup-v view {
		margin: 10rpx 30rpx 0rpx 0rpx;
		width: 95rpx;
		display: flex;
		flex-direction: column;
	}

	.text-v {
		text-align: center;
		font-size: 24rpx;
	}
</style>

<style scoped>
	.u-navbar .u-icon {
		margin-top: 5rpx;
	}

	.navbar-v {
		display: flex;
		flex-direction: row;
	}

	.wrap {
		margin-top: 20rpx;
	}

	.u-divider {
		margin: 0 auto;
		width: 90%;
	}

	.popup-v .u-icon {
		margin: 0rpx;
		width: 95rpx;
		height: 95rpx;
		padding: 23rpx;
		background-color: white;
		border-radius: 60rpx;
	}
</style>
